#wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    overflow: scroll;
/*    background: linear-gradient(#ffe535f8,#51f);*/
}

.text {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.labelWrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}
@keyframes fadeIn {
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes fadeOut {
    0%{opacity:1;}
    100%{opacity:0;}
}

.fadeIn{opacity:1 }
.fadeOut{opacity:0}

.label {
    font-size: 19fp;
    color: #ffffff;
    margin-top: 20vp;
}
.subLabel{
    font-size: 15fp;
    color: #777777;
    margin: 2vp;
}

.popup{
    position: absolute;
    height:50%;
    width:100%;
    background: linear-gradient(#000,#555);
}

.opacity0{opacity:0;}
.opacity1{opacity:0.1;}
.opacity2{opacity:0.2;}
.opacity3{opacity:0.3;}
.opacity4{opacity:0.4;}
.opacity5{opacity:0.5;}
.opacity6{opacity:0.6;}
.opacity7{opacity:0.7;}
.opacity8{opacity:0.8;}
.opacity9{opacity:0.9;}
.opacity10{opacity:1;}


.top50{top:50%;}
.top55{top:55%;}
.top60{top:60%;}
.top65{top:65%;}
.top70{top:70%;}
.top75{top:75%;}
.top80{top:80%;}
.top85{top:85%;}
.top90{top:90%;}
.top95{top:95%;}
.top100{top:100%;}